<!DOCTYPE html>
<html>

<head>
	<title>静态文件保存</title>
	<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
	<style>
		#textarea {
			width: calc(100% - 2rem);
			min-height: 500px;
			outline: none;
		}

		#textarea::-webkit-scrollbar {
			display: none;
		}

		#submit {
			min-width: 80px;
			padding: 5px 10px;
			border-radius: 5px
		}

		button {
			margin-right: 8px;
			cursor: pointer;
			padding: 8px 16px;
			width: calc((100% - 2rem - 24px) / 3);
		}

		body {
			margin: 1rem;
			font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu;
		}

		.input-form {
			margin: 1rem;

		}

		.input-item {
			display: inline;
		}

		.input-form .input-item:last-child {
			margin-left: 1rem;
		}

		textarea {
			border-color: #2196F3;
			border-radius: 5px;
			margin: auto 1rem;
		}

		textarea:focus { 
            outline: rgb(47, 133, 208) auto 1px !important;
		}

		h1 {
			text-align: center;
		}

        #result{
            word-break: break-all;
            text-align: center;;
        }
        .buttons::after{
            content: '';
            clear: both;
            display: block;
        }
	</style>

	<head>


	<body>
		<h1>静态文件保存</h1>
		<div class="input-form">
			<div class="input-item">
				令牌: <input id="token" type="password" placeholder="token">
			</div>
			<div class="input-item">
				文件名 <input id="filename" type="text" placeholder="不填则自动生成时间戳">
			</div>

		</div>
        <textarea id='textarea'></textarea>
        <div class="buttons">

            <div style="padding: 16px;float: right;">
                <button id="html">saveAsHtml</button>
                <button id="js">saveAsJS</button>
                <button id="css">saveAsCss</button>
            </div>
        </div>

		
		<div id="result" > 
		</div>
		<code id="code" contenteditable="true"></code>
		<pre id="pre" contenteditable="true"></pre>
	</body>

	<script>

		$(document).ready(function () {

			var password = localStorage.getItem('editor-password')
			if (password) {
				$('#token').val(password)
			}
			let host = window.location.host
			let baseUrl = 'http://' + host + '/file/saveBytesToQiniu'
			const submit = (type) => {
				var result = $('#textarea').text();
				var value = $('#textarea').val();
				var filename = $('#filename').val();
				$('#result').text(value);
				$('#pre').text(value)  
				$.ajax({
					type: "post",
					url: baseUrl,
					contentType: "application/json;charset=utf-8",
					data: JSON.stringify({
						"data": value,
						"filename": filename,
						"type": type,
						"token": $('#token').val()
					}),
					dataType: "json",
					beforeSend: function (XMLHttpRequest) {
						XMLHttpRequest.setRequestHeader("token", $('#token').val());
					},
					success: function (data) {
						$('#result').html(`link:<a href='${data.result}'>${data.result}</a>`);
						localStorage.setItem('editor-password', $('#token').val())
						$('#result').append(`<div><img src="${data.dataurl}"></div>`)
					}, error: function (error) {
						$('#result').text(JSON.stringify(error));
					}
				});
			}
			$('button').click(function (e) {
				submit(e.currentTarget.id)
			})
			$('#coding').click(function (e) {
				console.log($('#pre').text())
			}) 
		})  
	</script>

</html>